<template>
	<view class="fui-wrap">
		<view class="fui-wrap">
		<view class="fui-page__bd fui-page__spacing">
            <view class="fui-section__title">参考图片</view>
			<fui-upload refs="upload" background="#333" radius="20" :fileList="fileList" :max="maxImgSize" @complete="onUploadComplete" @preview="preview" :choose="false">
				<view @tap.stop="customChooseImages" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
					<fui-icon name="plussign" color="#d1d1d1"></fui-icon>
				</view>
			</fui-upload>
            <!-- 角色 tab 列表，用 fui-tabs 实现 -->
            <view class="fui-section__title fui-section-role">角色选择</view>
            <fui-tabs class="fui-section__tabs" :tabs="roleTabs" :current="activeRoleIndex" @change="onRoleTabChange" scroll alignLeft :short="false"></fui-tabs>
            <!-- 当前角色描述 -->
            <view class="role-desc">
                {{ currentRole.description }}
            </view>
            <view class="fui-section__title">笔记标题</view>
            <input
                class="fui-input"
                v-model="title"
                type="text"
                placeholder="给笔记取个标题（适当加入 emoji 更吸睛）"
                maxlength="60"
            />
            <view class="fui-section__title">笔记描述</view>
            <textarea class="fui-description" v-model="content" placeholder="用自然口语描述看到的画面和感受，可 @话题 / #标签" :maxlength="500"></textarea>
            <view class="counter">{{ (content || '').length }}/500</view>
            <view class="fui-section__title">参考笔记</view>
            <view class="ref-row">
                <input
                    class="fui-input"
                    v-model="referenceUrl"
                    type="text"
                    placeholder="粘贴红书链接（https://...），后台将抓取为参考"
                    @blur="onReferenceUrlBlur"
                />
                <view class="copy-btn" @tap="pasteFromClipboard">粘贴</view>
                <view class="copy-btn fetch" @tap="tryFetchReference">抓取</view>
            </view>
            <view class="input-tip">仅作内容参考，不会直接发布外链</view>

            <view class="fui-btn__box">
                <view class="btn primary" @tap="aiGenerate">AI 生成</view>
                <view class="btn outline" @tap="aiRewrite">AI 改写</view>
                <!-- <view class="btn success" @tap="publishNote">发布</view> -->
            </view>
		</view>
		
	</view>
		
	</view>
</template>

<script lang="ts" src="./publish.ts"></script>
<style>
::v-deep .fui-tabs__text-wrap{
    height: 70rpx!important;
}
.fui-tabs__scrollbox{
    margin-top: -10rpx!important;
}
.fui-description{
    min-height: 120rpx !important;
    height: auto !important;
    width: 100%;
    display: block;
    font-size: 28rpx;
    line-height: 2;
    color: #666;
    background: #f7f8fa;
    border: 4rpx solid var(--fui-color-primary, #465CFF)!important;
    box-sizing: border-box;
    border-radius: 12rpx;
    padding: 10rpx; /* add vertical padding so visual height respects min-height */
    resize: none;
}
.fui-section-role{
    padding-bottom: 0rpx!important;
    margin-bottom: 0rpx!important;
}

::v-deep .fui-section__title{
    color: #465CFF;
    margin-bottom: 20rpx!important;
}
::v-deep .fui-section__title:not(:first-child) {
    margin-top: 30rpx!important;
}
::v-deep .fui-upload__item {
    width: 100% !important;
    aspect-ratio: 1 !important;
    position: relative !important;
    border-radius: 12rpx !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

::v-deep .fui-upload__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12rpx !important;
}

/* 修复华为手机上删除按钮的显示问题 */
::v-deep .fui-upload__item .fui-upload__del {
    position: absolute !important;
    top: -6rpx !important;
    right: -6rpx !important;
    width: 36rpx !important;
    height: 36rpx !important;
    border-radius: 50% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999 !important;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3) !important;
    border: 2rpx solid white !important;
}

/* 清除可能的重复内容，只保留组件自带的删除图标 */
::v-deep .fui-upload__item .fui-upload__del::before,
::v-deep .fui-upload__item .fui-upload__del::after {
    display: none !important;
}

/* 确保删除按钮内的图标正常显示 */
::v-deep .fui-upload__item .fui-upload__del .fui-icon {
    color: white !important;
    font-size: 24rpx !important;
}
::v-deep .fui-upload__item:nth-child(3n) {
    /* 网格布局下不需要特殊处理第三列 */
}

/* 华为手机兼容性修复 - 使用网格布局 */
::v-deep .fui-upload__wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 20rpx !important;
    padding: 20rpx 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

::v-deep .fui-upload__add {
    width: 100% !important;
    aspect-ratio: 1 !important;
    border: 2rpx dashed #ddd !important;
    border-radius: 12rpx !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8f8f8 !important;
    box-sizing: border-box !important;
}

/* 修复华为手机触摸区域问题 */
::v-deep .fui-upload__item {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* 强制三列网格布局 */
::v-deep .fui-upload__wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 20rpx !important;
    padding: 20rpx 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

::v-deep .fui-upload__item,
::v-deep .fui-upload__add {
    width: 100% !important;
    aspect-ratio: 1 !important;
    max-width: none !important;
    min-width: none !important;
    margin-right: 0 !important;
}
.fui-btn__box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 64rpx;
}
.ref-row { 
    display: flex; 
    align-items: stretch; 
    gap: 12rpx; 
    flex-wrap: nowrap;
}
.ref-row .fui-input {
    flex: 1;
    min-width: 0; /* 允许输入框收缩 */
    width: auto; /* 覆盖之前的 100% */
    min-height: 80rpx; /* 设置最小高度，与标题输入框一致 */
    padding: 16rpx 10rpx; /* 与标题输入框保持一致的内边距 */
}
.fui-input {
    width: 100%;
    display: block;
    font-size: 28rpx;
    line-height: 2;
    color: #666;
    background: #f7f8fa;
    border: 4rpx solid var(--fui-color-primary, #465CFF) !important;
    box-sizing: border-box;
    border-radius: 12rpx;
    padding: 16rpx 10rpx; /* 增加上下内边距 */
    min-height: 80rpx; /* 设置最小高度 */
}
.copy-btn {
    white-space: nowrap;
    flex-shrink: 0; /* 按钮不缩小 */
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #fff;
    background: var(--fui-color-primary, #465CFF);
    border-radius: 12rpx;
    min-width: 80rpx; /* 确保按钮最小宽度 */
}
.copy-btn.fetch { background: #2db55d; }
.input-tip {
    margin-top: 8rpx;
    font-size: 24rpx;
    color: #999;
}
.counter { text-align: right; font-size: 24rpx; color: #999; margin-top: 6rpx; }
.btn { width: 100%; height: 84rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; margin-top: 18rpx; }
.btn.primary { background: var(--fui-color-primary, #465CFF); color: #fff; }
.btn.outline { background: transparent; color: var(--fui-color-primary, #465CFF); border: 2rpx solid var(--fui-color-primary, #465CFF); }
.btn.success { background: #2db55d; color: #fff; }
.role-desc {
    min-height: 60rpx !important;
    width: 100%;
    display: block;
    line-height: 2;
    font-size: 28rpx;
    color: #666;
    background: #f7f8fa;
    border-radius: 12rpx;
    margin-top: -2px;
    border: 4rpx solid var(--fui-color-primary, #465CFF);
    box-sizing: border-box;
    padding-left:  10rpx;
    padding-right: 10rpx;
}
</style>
